<template>
  <div class="common-layout">
    <el-container>
      <el-aside
        style="height: calc(100vh -60px); width: 220px; background: white"
      >
        <div class="logo">
          <img src="../../assets/img/14.png" alt="" />
          <span class="CloudTreasurer">云掌柜</span>
        </div>
        <div class="demo-collapse">
          <el-collapse accordion @change="handleChange">
            <router-link to="/home/data">
              <el-collapse-item name="1" title="数据中心">
                <template #title>
                  <div class="ListName">
                    <img src="../../assets/img/img1.png" alt="" />数据中心
                  </div>
                </template>
                <div class="listname">交易数据</div>
                <div class="listname">实时数据</div>
              </el-collapse-item>
            </router-link>

            <el-collapse-item name="2" title="商品管理">
              <template #title>
                <div class="ListName">
                  <img src="../../assets/img/img2.png" alt="" />商品管理
                </div>
              </template>
              <router-link to="/home/product/classify">
                <div class="listname">商品分类</div>
              </router-link>
              <router-link to="/home/product/puton">
                <div class="listname">已上架商品</div>
              </router-link>
              <router-link to="/home/product/release">
                <div class="listname">发布商品</div>
              </router-link>
            </el-collapse-item>
            <el-collapse-item name="3" title="订单管理">
              <template #title>
                <div class="ListName">
                  <img src="../../assets/img/img3.png" alt="" />订单管理
                </div>
              </template>
              <router-link to="/home/order/all">
                <div class="listname">全部订单</div>
              </router-link>

              <router-link to="/home/order/evaluate">
                <div class="listname">订单评价</div>
              </router-link>
            </el-collapse-item>
            <el-collapse-item title="店铺管理" name="4">
              <template #title>
                <div class="ListName">
                  <img src="../../assets/img/img4.png" alt="" />店铺管理
                </div>
              </template>
              <router-link to="/home/shop/mail">
                <div class="listname">物流设置</div>
              </router-link>
            </el-collapse-item>

            <el-collapse-item title="营销推广" name="6">
              <template #title>
                <div class="ListName">
                  <img src="../../assets/img/img6.png" alt="" />营销推广
                </div>
              </template>
              <router-link to="/home/market/advertisement">
                <div class="listname">广告管理</div>
              </router-link>
            </el-collapse-item>

            <el-collapse-item title="会员中心" name="5">
              <template #title>
                <div class="ListName">
                  <img src="../../assets/img/img5.png" alt="" />文案中心
                </div>
              </template>
              <router-link to="/home/vip/my">
                <div class="listname">我的文案</div>
              </router-link>
              <!-- <router-link to="/home/vip/center">
                <div class="listname">管理中心</div>
              </router-link> -->
            </el-collapse-item>
          </el-collapse>
        </div>
      </el-aside>
      <el-container>
        <el-header>
          <div class="group-left">
            <img src="../../assets/img/group1.png" alt="" />
            <img src="../../assets/img/group2.png" alt="" />
            <img src="../../assets/img/group3.png" alt="" />
            <img src="../../assets/img/group4.png" alt="" />
            <img src="../../assets/img/group5.png" alt="" />
          </div>
          <div class="group-right">
            <input type="text" placeholder="搜索" />
            <div class="touxiang">
              <img class="prompt" src="../../assets/img/img9.png" alt="" />
              <img class="prompt" src="../../assets/img/img11.png" alt="" />
            </div>
            <span>Hi,panghu</span>
          </div>
        </el-header>
        <el-main style="background: #f7faff">
          <transition>
            <router-view></router-view>
          </transition>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script lang="ts">
import Data from "./data/DataView.vue";

import { defineComponent } from "vue";
// import * as echarts from "echarts";

export default defineComponent({
  setup() {
    const handleChange = () => {
      // this.$router.push("/data");
    };
    return {
      Data,
      handleChange,
    };
  },
});
</script>

<style lang="less" scoped>
.logo {
  width: 110px;
  height: 44px;
  text-align: center;
  line-height: 44px;
  margin-left: 37px;
  margin-top: 18px;
  margin-bottom: 60px;
  img {
    height: 44px;
    width: 44px;
    vertical-align: middle;
  }
  .CloudTreasurer {
    font-size: 18px;
    margin-left: 10px;
  }
}

.demo-collapse {
  text-align: center;
}
.ListName {
  text-align: center;
  width: 100%;
  height: 100%;
  font-weight: bolder;
  img {
    margin-right: 20px;
  }
}
.listname {
  width: 100%;
  height: 38px;
  line-height: 38px;
}

.el-header {
  height: 70px;
  background: white;
  padding-bottom: 15px;
  .group-right {
    width: 500px;
    float: right;
    margin-right: -5px;
    display: flex;
    align-items: center;
    align-content: space-between;
    justify-content: center;
    padding-top: 16px;
    .touxiang {
      width: 100px;
      display: flex;
      align-items: center;
      align-content: space-around;
      justify-content: space-around;
    }
    span {
      font-size: 20px;
      color: #595959;
    }
    // .prompt {
    // }
    input {
      outline: none;
      border-radius: 20px;
      width: 341px;
      height: 44px;
      font-size: 15px;
      padding-left: 20px;
      border: 0;
      background: #eaf0ff;
      text-indent: 30px;
    }
    input::placeholder {
      font-size: 15px;
      color: #629eff;
    }
  }

  .group-left {
    width: 300px;
    display: inline-block;
    margin-top: 16px;

    img {
      margin-right: 10px;
    }
  }
}
</style>
